<template>
<a-spin :spinning="showLoading"  tip="请求中" size="large">
  <a-card :bordered="false">
    <a-row>
      <a-col :span="24">
        <a-form layout="inline" :form="form" @submit="handleSubmit">
          <a-form-item label="品牌">
            <a-select
              style="width:200px"
              v-decorator="[
                'brandId',
                {
                  rules: [{ required: true, message: '请选择品牌!' }]
                }
              ]"
              placeholder="全部"
            >
              <a-select-option :value="item.weid" v-for="item in brands" :key="item.weid">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="商品ID">
            <a-input
              placeholder="请输入商品ID"
              @change="skuChange"
              v-decorator="[
                'goodsId',
                {
                  rules: [{ required: true, message: '请输入条码!' }]
                }
              ]"
            ></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">搜索</a-button>
            <a-button type="primary" style="margin-left:10px" @click="deleteGoods">下架</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" style="margin-top:20px;">
        <a-table bordered :columns="columns" :rowKey="(record, index) => index" :data-source="dataSource" :pagination="false" :scroll="{ x: true }">
          <span slot="action" slot-scope="record">
            <a @click="handleSynchronize(record.skuId)">同步</a>
            
          </span>
        </a-table>
      </a-col>
    </a-row>
    <a-modal title="同步库存" :visible="visible" width="500px" @cancel="visible = false" @ok="ok">
      <a-form-model ref="rulesForm" :model="stockForm" :rules="stockRules" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
        <a-form-model-item label="库存" prop="stock">
          <a-input-number v-model="stockForm.stock" style="width: 100%;" placeholder="请输入库存" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-card>
</a-spin>
</template>

<script>
import { inventoryDetail, inventoryUpdateStock,updateShelfStatus } from '@/api/micromall'
import {  queryResult } from '@/api/micromall/box.js'

import { brands } from '../../util/brand'

const columns = [
  {
    title: 'skuId',
    width: 100,
    dataIndex: 'skuId'
  },
  {
    title: '商品标题',
    width: 200,
    dataIndex: 'productTitle'
  },
  {
    title: '商品条码',
    width: 200,
    dataIndex: 'outerSkuCode'
  },
  {
    title: '操作',
    align: 'center',
    width: 100,
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  data() {
    return {
      brands,
      storeMap: {
        QUYU: '区域共享仓',
        NT: '内淘共享仓',
        DP: '门店仓'
      },
      bordered: false,
      form: this.$form.createForm(this),
      columns,
      dataSource: [],
      stockForm: {
        stock: ''
      },
      stockRules: {
        stock: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              const boolean = new RegExp('^[0-9]*$').test(value)
              if (!boolean) {
                callback(new Error('请输入正确的格式'))
              }else{
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      },
      visible: false,
      skuId: '',
      showLoading:false,
      timer:null
    }
  },

  methods: {
    deleteGoods() {
      const { goodsId,brandId } = this.form.getFieldsValue()
      if(!goodsId){
        return this.$message.error('请输入商品id')
      }
      if(!brandId){
        return this.$message.error('请选择品牌')
      }
      this.showLoading = true
      updateShelfStatus({brandId,goodsId},brandId,goodsId).then(res => {
        if (res.code == 200) {
          this.timer = setInterval(this.getResult, 2000, res.data)
        } else {
          this.showLoading = false
          this.$message.error(res.msg)
        }
      }).catch((err)=>{
        console.log(err)
        this.showLoading = false
      })
    },
    async getResult(key) {
      const result = await queryResult({ key })
      if (result.data !== 'wait') {
        this.showLoading = false
        clearInterval(this.timer)
        this.timer = null
        this.$message.info(result.data)
      }
    },
    // 同步
    handleSynchronize(skuId) {
      this.visible = true
      this.skuId = skuId
    },

    ok() {
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          const data = {
            skuId: this.skuId,
            stockNum: this.stockForm.stock
          }
          const brandId = this.form.getFieldsValue().brandId
          inventoryUpdateStock(data, brandId).then(res => {
            if (res.code === 200) {
              this.$message.success('同步成功！');
              this.skuId = ''
              this.visible = false
            } else {
              this.$message.error(res.data.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    skuChange(value) {
      if (value == '') {
        this.dataSource = []
      }
    },
    async getInventoryCheckList(query) {
      this.showLoading = true
      const re = await inventoryDetail(query)
      this.showLoading = false
      if (re.code == 200) {
        this.dataSource = re.data.skuList
        this.goodsId = re.data.goodsId
      } else {
        this.dataSource = []
        this.$message.error(re.msg)
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.getInventoryCheckList(values)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
#copy {
  position: absolute;
  opacity: 0;
}
.poster {
  width: 50px;
  height: 50px;
}
.previmg {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    max-width: 300px;
  }
}
</style>
